<template>
  <section>
    <!--搜索区-->
    <el-row style="padding-bottom: 10px">
      <el-col :span="4">选择用户：</el-col>
      <el-col :span="12">
        <el-select clearable v-model="selUser" :filterable="true" remote :reserve-keyword="false" default-first-option  placeholder="请输入姓名" :remote-method="remoteMethod" :loading="loading" size="mini">
          <el-option v-for="user in users" :key="user.id" :label="user.name" :value="user.id">
            <span style="float: left">{{ user.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ user.phone }}</span>
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <!--显示区-->
    <el-row v-if="selUser">
      <el-collapse>
        <el-collapse-item :name="examine.id" v-for="examine in examineList" :key="examine.id">
          <template slot="title">
            <el-row>
              <el-col :span="3" style="margin-left: 20px">
                {{examine.date}}
              </el-col>
              <el-col :span="6">
                {{examine.name}}
              </el-col>
              <el-col :span="10">
                <span v-if="examine.state === 0" style="color:red">未开始</span>
                <span v-if="examine.state === 1" style="color:#FFD700">进行中...</span>
                <span v-if="examine.state === 2" style="color:green">已完成</span>
              </el-col>
            </el-row>
          </template>
          <el-container style="height: 400px; border: 1px solid #eee;margin-top: 10px">
            <el-main>
              <el-table :data="examine.examineItems" style="width: 100%">
                <el-table-column type="index" width="50"/>
                <el-table-column prop="name" label="项目" width="120">
                </el-table-column>
                <el-table-column label="总结" width="300">
                  <template slot-scope="scope">
                    <div v-html="scope.row.summary" v-if="scope.row.examineType.code !== 'DMS'"/>
                    <el-button v-if="scope.row.examineType.code === 'DMS'" type="text" size="mini" @click="preview(scope.row)">{{scope.row.summary}}</el-button>
                  </template>
                </el-table-column>
                <el-table-column label="签名" width="150">
                  <template slot-scope="scope">
                    <el-popover placement="top" width="400" trigger="hover">
                      <!--<el-row> -->
                      <img :src="scope.row.signature"/>
                      <!--</el-row>-->
                      <el-row slot="reference"><img :src="scope.row.signature" width="100px"/></el-row>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.examineType.code !== 'DMS'" @click="detailItem(scope)" type="text" size="small">详情</el-button>
                    <el-button v-if="scope.row.examineType.code === 'DMS'" @click="selDMS(scope)" type="text" size="small">导入</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-main>
          </el-container>
        </el-collapse-item>
      </el-collapse>
    </el-row>
    <el-row>
      <el-dialog :visible.sync="dialogShow" :close-on-click-modal="false" v-if="dialogShow" >
        <examineDetail :examineItem="examineItem" v-on:close="close"></examineDetail>
      </el-dialog>
      <el-dialog :visible.sync="showDMS" :close-on-click-modal="false" v-if="showDMS" >
        <el-row style="display: flex;align-items: center;">
          <el-col :span="6">
            <el-input size="mini" placeholder="请输入关键字"  clearable v-model="examineItem.data.userName" @keydown.native.prevent.enter="searchDMS" ></el-input>
          </el-col>
          <el-col :span="4">
            <i class="el-icon-search" @click="searchDMS" style="margin-left:10px" ></i>
          </el-col>
        </el-row>
        <selDMS :keywords="examineItem.data.userName" :examineItem="examineItem"></selDMS>
      </el-dialog>
      <el-dialog :visible.sync="showDMSDetails" v-if="showDMSDetails" >
        <showDMS :OReporttm="JSON.parse(currOReporttm.details)"></showDMS>
      </el-dialog>
    </el-row>
  </section>
</template>

<script>
  import examineDetail from './answerDetail';
  import selDMS from './selDMS';
  import showDMS from './showDMS';
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions} from 'vuex'
  export default {
    name: "health_check",
    components:{examineDetail,selDMS,showDMS},
    data() {
      return {
        dialogShow:false,
        selUser:'',
        loading: false,
        users:[],
        totalPage:0,
        examineList:[],
        examineItem:null,
        showDMS:false,
        resumePage:0,
        resumeList:[],
        currOReporttm:null,
        showDMSDetails:false
      }
    },
    created(){
      //获取所有体检结果
      this.getExamineList()
    },
    watch:{
      selUser(nv,ov){
        console.log(nv)
        this.examineList = []
        if(nv){
          //筛选出该客户的体检
          this.getExamineListByUser(8)
        }else {
          //显示全部体检，按最近排列
          this.getExamineList()
        }
      },
      currAnswer(nv,ov){
        console.log(nv)
      }
    },
    computed:{
      ...mapGetters(['department'])
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      close(){
        this.dialogShow=false
      },
      filter(summary){
        console.log(summary)
      },
      remoteMethod(keywords) {
        this.fetch({name:"getUserList",data:{keywords}})
          .then(res=>{
            console.log(res)
            this.users=res.content
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getExamineList(pageNo){
        this.fetch({name:"getExamineList",data:{page:pageNo?pageNo:0,departmentId:this.department.id,state:2}})
          .then(res=>{
            this.examineList = res.content
            this.totalPage = res.totalPage
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getExamineListByUser(userId){
        this.fetch({name:"getExamineList",data:{departmentId:this.department.id,userId}})
          .then(res=>{
            this.examineList = res.content
            console.log(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      detailItem(scope){
        this.examineItem=scope.row
        if(this.examineItem){
          console.log(this.examineItem)
          this.dialogShow = true
        }
      },
      selDMS(scope){
        // console.log(scope.row)
        this.examineItem=scope.row
        // let key = scope.row.data.userName
        // //用人名搜索经络检测结果，找最新的
        this.showDMS=true
      },
      searchDMS(key){
        // console.log(this.examineItem.data.userName)
        // this.searchResume(this.examineItem.data.userName)
      },
      searchResume(keywords){
        this.fetch({name:"searchResume",data:{keywords}})
          .then(res=>{
            console.log(res)
            this.resumeList=res.content
            this.resumePage=res.totalPages
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      preview(row){
        console.log(row)
        this.currOReporttm=row
        this.showDMSDetails=true
      }
    }
  }
</script>

<style scoped>

</style>
